<template>
    <div>
        <h2>添加</h2>
        <div class="box">
             <el-form
                ref="ruleFormRef"
                :model="addform"
                :rules="rules"
                label-width="120px"
                class="demo-ruleForm"
                :size="formSize"
                status-icon
            >
                <el-form-item label="姓名" prop="name">
                <el-input v-model="addform.name" />
                </el-form-item>
                <el-form-item label="部门" prop="name">
                  <el-cascader v-model="addform.depid" :options="departmentlist" @change="handleChange" placeholder="请选择部门" />
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                <el-input v-model="addform.mobile" />
                </el-form-item>
                <el-form-item label="地址" prop="address">
                  <el-select v-model="addform.address" class="m-2" placeholder="请选择定位">
                    <el-option
                    v-for="item in addlist"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    />
                </el-select>    
                </el-form-item>
                <el-form-item>
              
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                <el-button type="primary" 
               
                    >添加</el-button
                >
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import {  ref,reactive,toRefs,onMounted} from "vue";
import type { FormInstance, FormRules } from 'element-plus'
import { addressList,trackAdd } from "../../api/track/index";
onMounted(()=>{
  getAddressList()
     
})
const formSize = ref('default')
// const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  
  value: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})



const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))



const value = ref('')

// 接口数据
const data=reactive({
    from:{
        page:1,
        pageSize:10,
        name:'',//id 名称
        mobile:'',//电话
        starttime:'',//开始时间
        endtime:'',//结束时间
    }
})
const { from } = toRefs(data)

const name = ref([])


// 部门列表
const departmentlist = [
{
    value: '1',
    label: '京管保卫处'
  },
  {
    value: 'component',
    label: '京管校本部',
    children: [
      {
        value: 'basic',
        label: '学生招办',
        children: [
          {
            value: 'layout',
            label: '西楼',
          }
        ],
      },
      {
        value: 'form',
        label: '学生处',
        children: [
          {
            value: 'radio',
            label: '教育处',
          }
        ],
      },
      {
        value: 'data',
        label: '123'
      },
      {
        value: 'notice',
        label: '总务处'
      },
      {
        value: 'navigation',
        label: '工程部'
      },
      {
        value: 'others',
        label: '教务处'
      },
    ],
  },
  {
    value: 'resource',
    label: '合作单位',
    children: [
      {
        value: 'axure',
        label: '乐宁教育',
        children: [
          {
            value: 'layo',
            label: '老胖洗浴中心',
          }
        ],
      },
      {
        value: 'sketch',
        label: '中科青云',
      },
      {
        value: 'docs',
        label: '临川国际',
      },
      {
        value: 'docs2',
        label: '临川国际',
      },
      {
        value: 'docs3',
        label: '蓝基因',
      },
      {
        value: 'docs4',
        label: '北大青鸟',
      },
      {
        value: 'docs5',
        label: '航空培训',
      },
    ],
  },
]

const handleChange = (name:any) => {
  console.log(name)
}

let addlist=ref()//点位列表 
//请求点位列表 
const getAddressList = async () => { 
  const res: any = await addressList(data.from)
  // console.log('res',res)
if (res.code === '00000') {
  
  addlist.value=res.data

} 
}

const ruleFormRef = ref<FormInstance>()
const addform = reactive({
  
  name: '', 
    depid: '', 
    mobile: '', 
    address: 1
})
// 校验
const rules = reactive<FormRules>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  depid: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
 
  mobile: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 11, message: '手机号不正确', trigger: 'blur' },
  ],
  address: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
 
})

// 添加
const gettrackAdd=async()=>{
  const res: any = await trackAdd(addform)
  console.log(res);
  
}
</script>

<style scoped lang="less">
.box{
    width: 400px;
    padding: 20px;

}
</style>